<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>流程管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/css/user.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1041315_7utpmi3q5g4.css">
</head>
<body class="childrenBody">
<fieldset class="layui-elem-field">
    <legend>流程查询</legend>
    <div class="layui-field-box">
        <form class="layui-form">
            <div class="layui-form toolbar">
                部署id：
                <div class="layui-input-inline">
                    <input type="text" class="layui-input searchVal" id="deploymentId" name="deploymentId"
                           placeholder="请输入部署id"/>
                </div>
                流程名称：
                <div class="layui-input-inline">
                    <input type="text" class="layui-input searchVal" id="name" name="name" placeholder="请输入流程名称"/>
                </div>
                <div class="layui-input-inline">
                    <a class="layui-btn" lay-submit="" lay-filter="searchForm"><i class="iconfont icon-sousuo2"></i>查询</a>
                </div>
                <div class="layui-inline">
                    <button type="reset" id="resetTable" class="layui-btn layui-btn-primary"><i class="iconfont icon-zhongzhi"></i>重置</button>
                </div>
            </div>
        </form>
    </div>
</fieldset>
<div class="layui-form users_list">
    <table class="layui-table" id="actList" lay-filter="act"></table>

    <script type="text/html" id="barDemo">
        <!--<a class="layui-btn layui-btn-xs" lay-event="edit" ><i class="iconfont icon-xiugai"></i>编辑</a>-->
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="iconfont icon-shanchu"></i>删除</a>
    </script>
</div>
<div id="page" style="text-align: center;"></div>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/js/tools.js?t=1"></script>
<script type="text/javascript" th:inline="none">
    var $, common;
    layui.config({
        base: '/js/common/' //假设这是你存放拓展模块的根目录
    }).use(['layer', 'form', 'table', 'laypage', 'common'], function () {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form,
            laypage = layui.laypage,
            common = layui.common,
            table = layui.table;
        //表格变量

        table.render({
            elem: '#actList',
            even: true,
            url: 'showAct',
            method: 'post',
            id: 'actList',
            page: false,
            loading: true,
            width: $(parent.window).width() - 223,
            cols: [[
                {checkbox: true, fixed: true, width: '5%'}
                , {field: 'id', title: '编号', width: '15%', sort: true}
                , {field: 'name', title: '流程名称', width: '15%', sort: true}
                , {field: 'key', title: 'key', width: '12%', sort: true}
                , {field: 'deploymentId', title: '部署id', width: '5%', sort: true}
                , {field: 'diagramResourceName', title: '流程图资源', width: '15%', sort: true}
                , {field: 'category', title: '版本', width: '15%', sort: true}
                , {field: 'resourceName', title: '资源名称', width: '10%', sort: true}
                , {field: 'text', title: '操作', toolbar: '#barDemo'}

            ]],
            done: function (res, curr, count) {
                //pages=res.page;
                counts = res.count;
                //完整功能
                laypage.render({
                    elem: 'page'
                    , count: counts,
                    first: '首页',
                    last: '尾页'
                    , layout: ['count', 'prev', 'page', 'next', 'refresh', 'skip']
                    , theme: '#00A0E9'
                    , curr: curr
                    , skip: true
                    , jump: function (obj, first) {
                        curr = obj.curr;

                        if (!first) {
                            getData(obj.curr, obj.limit)
                        }
                    }
                });

            }

        });
        //重置
        $('#resetTable').on('click', function () {
            $('#deploymentId').val("");
            $('#name').val("");
            table.reload('actList'
            );
        });

        function getData(page, limit) {
            $.ajax({
                type: 'post',
                url: 'showAct?page=' + page + "&limit=" + limit,
                async: false,
                success: function (data) {
                    $(".layui-laypage-btn").click();
                    table.reload('actList', {
                        data: data,
                        page: {
                            curr: page
                        }
                    });

                }
            });
        }

        //监听工具条
        table.on('tool(act)', function (obj) {
            var data = obj.data;
            if (obj.event === "del") {
                layer.confirm("你确定要删除？", {btn: ['是的,我确定', '我再想想']},
                    function () {
                        $.post("delDeploy", {"id": data.id}, function (res) {
                            if (res.success) {
                                layer.msg("删除成功", {time: 1000}, function () {
                                    table.reload('actList');
                                });
                            } else {
                                layer.msg(res.message);
                            }

                        });
                    }
                )
            }
        });
        //搜索
        form.on("submit(searchForm)", function (data) {
            table.reload('actList', {where: data.field});
        });
    });
</script>
</body>
</html>